<template>
    <a-table :columns="columns" :data-source="dataSource" bordered>
        <template #bodyCell="{ column, text, record }">
            <template v-if="['name', 'age', 'address'].includes(column.dataIndex)">
                <div>
                    <a-input v-if="editableData[record.key]" v-model:value="editableData[record.key][(column.dataIndex as keyof DataItem)]"
                        style="margin: -5px 0" />
                    <template v-else>
                        {{ text }}
                    </template>
                </div>
            </template>
            <template v-else-if="column.dataIndex === 'time'">
                {{ text }}
            </template>
            <template v-else-if="column.dataIndex === 'operation'">
                <div class="editable-row-operations">
                    <span v-if="editableData[record.key]">
                        <a-typography-link @click="save(record.key)">Save</a-typography-link>
                        <a-popconfirm title="Sure to cancel?" @confirm="cancel(record.key)">
                            <a>Cancel</a>
                        </a-popconfirm>
                    </span>
                    <span v-else>
                        <a @click="edit(record.key)">Edit</a>
                    </span>
                </div>
            </template>
        </template>
    </a-table>
</template>
<script setup lang="ts">
import {cloneDeep } from 'lodash'
import { reactive, ref } from 'vue';
import type { UnwrapRef } from 'vue';
import dayjs from 'dayjs';

const columns = [
    {
        title: 'name',
        dataIndex: 'name',
        width: '20%',
    },
    {
        title: 'age',
        dataIndex: 'age',
        width: '15%',
    },
    {
        title: 'address',
        dataIndex: 'address',
        width: '35%',
    },{
        title: 'time',
        dataIndex: 'time',
        width: '10%',
    },
    {
        title: 'operation',
        dataIndex: 'operation',
    },
];
interface DataItem {
    key: string;
    name: string;
    age: number;
    address: string;
    time: string;
}
const data: DataItem[] = [];
const time = dayjs().format('HH:mm:ss')
for (let i = 0; i < 100; i++) {
    data.push({
        key: i.toString(),
        name: `Edrward ${i}`,
        age: 32,
        address: `London Park no. ${i}`,
        time
    });
}

const dataSource = ref(data);
const editableData: UnwrapRef<Record<string, DataItem>> = reactive({});

const edit = (key: string) => {
    debugger
    editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.key)[0]);
    Object.assign(editableData[key], {
        time: dayjs(editableData[key].time, 'HH:mm:ss').format('HH:mm')
    })
    console.log(dataSource.value[0], editableData[key], dataSource.value[0] === editableData[key])
};
const save = (key: string) => {
    Object.assign(dataSource.value.filter(item => key === item.key)[0], editableData[key]);
    delete editableData[key];
};
const cancel = (key: string) => {
    delete editableData[key];
};

</script>

<style scoped>

.editable-row-operations a {
  margin-right: 8px;
}
</style>